<template>
    <div class="container">
        <div class="search-content">
            <el-form :model="searchContent" ref="formRef" :inline="true">
                <el-form-item prop="name" label="礼品名称：">
                    <el-input v-model="searchContent.name" placeholder="请输入" maxlength="32"></el-input>
                </el-form-item>
                <el-form-item label="商品ID：" prop="good_id">
                    <el-input
                        v-model="searchContent.good_id"
                        placeholder="请输入"
                        @input="searchContent.good_id = searchContent.good_id.replace(/^0|[^0-9]/g,'')"
                        maxlength="10">
                    </el-input>
                </el-form-item>
                <el-form-item label="供应商：" prop="business">
                    <el-select
                        v-model="searchContent.business"
                        filterable
                        clearable
                        placeholder="请选择">
                        <el-option label="京东" value="京东"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="虚拟：" prop="virtual">
                    <el-select clearable v-model="searchContent.virtual" placeholder="请选择">
                        <el-option key="否" label="否" value="0"></el-option>
                        <el-option key="是" label="是" value="1"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="商品编码：" prop="serial">
                    <el-input
                        class="search-content-input"
                        v-model="searchContent.serial"
                        placeholder="商品编码">
                    </el-input>
                </el-form-item>
                <el-form-item prop="editor" label="操作人：">
                    <el-input v-model="searchContent.editor" placeholder="操作人" maxlength="32"></el-input>
                </el-form-item>
                <el-form-item prop="status" label="审核状态：">
                    <el-select v-model="searchContent.status" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in statusType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="is_del" label="删除状态：">
                    <el-select v-model="searchContent.is_del" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in delType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch(true)">搜索</el-button>
                    <el-button type="primary" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight">
                <el-table-column 
                    prop="good_id" label="礼品ID" width="80" align="center">
                </el-table-column>
                <el-table-column 
                    prop="good_serial" label="商品编号" min-width="150" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="good_name" label="礼品名称" min-width="280" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="point" label="兑换元宝" min-width="80" align="center">
                </el-table-column>
                <el-table-column 
                    prop="business_txt" label="供应商" min-width="180" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column align="center" prop="price" label="礼品原价" min-width="100"></el-table-column>
                <el-table-column align="center" prop="storage" label="库存" min-width="80"></el-table-column>
                <el-table-column 
                    prop="editor" label="操作人" min-width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="agreement_price" label="协议价" min-width="100" align="center">
                </el-table-column>
                <el-table-column 
                    prop="min_profit_rate" label="最低利润" min-width="100" align="center">
                </el-table-column>
                <el-table-column label="操作" min-width="90" align="center">
                    <template #default="{ row }">
                        <el-popconfirm
                            v-if="row.is_del == 0"
                            title="确定审核该价格?"
                            width="160px"
                            cancelButtonType="plain"
                            confirmButtonText="通过"
                            cancelButtonText="取消"
                            @confirm="handleReview(row.id, 1)"
                            :disabled="row.status != 0">
                            <template #reference>
                                <el-button 
                                    type="text" :class="statusType[(+row.status || 0)].class">
                                    {{ statusType[(+row.status || 0)].label }}
                                </el-button>
                            </template>
                        </el-popconfirm>
                        <el-button v-else type="text" disabled>
                            已删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group"></div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js"
import { objScreen } from "@/common/js/util.js"
export default {
    data() {
        return {
            searchContent: {
                name: '',                // 礼品名称
                good_id: '',             // 商品ID
                business: '',            // 供应商
                update_type: '',         // 更新类型
                virtual: '',             // 虚拟
                serial: '',              // 商品编码
                editor: '',              // 操作人
                status: '',              // 审核状态
                is_search: false         // 是否处于搜索
            },
            pageArr: {   
                page: 1,              // 当前页码
                pageSize: +localStorage.getItem('pageSize') || 20, // 每页显示数量
                total: 0                 // 数据总数
            },
            statusType: [
                { value: 0, label: '未审核', class: 'color-danger' }, 
                { value: 1, label: '已审核', class: 'color-success' }
            ],
            delType: [
                { value: 0, label: '未删除' }, 
                { value: 1, label: '已删除' }
            ],
            dataList: [],                // 列表数据
            oHeight: 600
        }
    },
    methods: {
        async getData() {
            try {
                let datas = {
                    pageSize: this.pageArr.pageSize,
                    page: this.pageArr.page
                }
                if (this.searchContent.is_search) {
                    datas = { ...datas, ...this.searchContent }
                }
                objScreen(datas)
                const res = await this.$http.get('/admin/pointprod/index.php?act=pointGoods&op=getGoodsPriceList', { params: datas })
                if (res.code == 1) {
                    this.dataList = res.data.list || []
                    this.pageArr.total = res.data.total
                } else {
                    this.dataList = []
                    this.pageArr.total = 0
                }
            } catch (error) {
                error && this.$message.error(`${error}`)
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize)
            this.pageArr.pageSize = pageSize
            this.handleCurrentChange(1)
        },
        handleCurrentChange(page) {
            this.pageArr.page = page
            this.getData()
        },
        handleSearch(is_search = true) {
            this.searchContent.is_search = is_search
            this.handleCurrentChange(1)
        },
        handleReset() {
            this.$refs.formRef.resetFields()
            if (!this.searchContent.is_search) return
            this.handleSearch(false)
        },
        handleReview(id, status) {
            this.$http.post('/admin/pointprod/index.php?act=pointGoods&op=examineGoodPrice', { id, status })
            .then(res => {
                if (res.code == 1) {
                    this.$message.success('审核成功')
                    this.getData()
                } else {
                    this.$message.error(`${res.msg}`)
                }
            })
            .catch(error => this.$message.error(`${error}`))
        }
    },
    created() {
        this.getData()
    },
    mounted() {
        resize(this)
    }
}
</script>
<style lang="scss" scoped>
.status-1 { color: #67C23A }
.status-2 { color: #F56C6C }
</style>
